import {useState} from 'react'
import './App.css'
import {Button, Modal, Typography, ConfigProvider, theme} from 'antd'

function App() {

  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const config = {
    // algorithm: theme.darkAlgorithm,

    token: {
      colorPrimary: 'rgba(67, 222, 166, 1)',
      colorSuccess: 'red',
      colorInfo: 'red',
      borderColor: 'red',



    },

    components: {
      Button: {
        colorPrimary: 'red',
        colorPrimaryBorderHover: '#000',
        colorInfoBorder: 'rgba(67, 222, 166, 1)',
        colorInfoBorderHover: 'rgba(67, 222, 166, 1)',
        colorPrimaryActive: 'rgba(67, 222, 166, 1)',
        colorPrimaryBorder: 'rgba(67, 222, 166, 1)',
        colorPrimaryHover: '#000',
        colorPrimaryText: '#000',
        colorWhite: '#000'
        // primaryShadow: 'none',
        // colorPrimaryBorderHover: 'rgba(67, 222, 166, 1)',
        // colorInfoBorder: 'rgba(67, 222, 166, 1)',
        // colorInfoBorderHover: 'rgba(67, 222, 166, 1)',
        // colorPrimaryActive: 'rgba(67, 222, 166, 1)',
        // colorPrimaryBorder: 'rgba(67, 222, 166, 1)',
        // algorithm: true, // 启用算法
      },
      Input: {
        // colorPrimary: '#eb2f96',
        algorithm: true, // 启用算法
      }
    },
  }
  return (
    <>
      <ConfigProvider theme={config}>
        <Button type="primary">HELLO button</Button>
        <Button type="default">HELLO button</Button>
        <Button danger>HELLO button</Button>
        <Button type="warning">HELLO button</Button>
        <Button type="success">HELLO button</Button>
        <Typography.Title level={1} type="success">1级标题</Typography.Title>
        <Typography.Title level={2} type="danger">2级标题</Typography.Title>
        <Typography.Title level={3} type="secondary">3级标题</Typography.Title>
        <Typography.Title level={4} type="warning">4级标题</Typography.Title>
        <Typography.Title level={5}>5级标题</Typography.Title>
        <Typography.Text strong>加粗文字</Typography.Text>
        <Button type="primary" onClick={showModal}>
          Open Modal
        </Button>
        <Modal centered title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </ConfigProvider>
    </>
  )
}

export default App
